<template>
  <div class="resource-tidy-card-main" v-if="cardData">
    <div class="resource-tidy-card-img">
<!--      <img :src="require('htpp://10.255.126.152/stat'+cardData.surfacePlotImg)" alt=""/>-->
      <img :src="cardData.surfacePlotImg" alt=""/>
    </div>
    <div class="resource-tidy-card-dec">
      <div class="resource-tidy-card-title">
        <span @click="jumpDetails">{{ cardData.resourceName }}</span>
      </div>
      <div class="resource-tidy-card-intr">
        {{ cardData.resourceDescribe }}
      </div>
      <div class="resource-tidy-card-dep">
        发布单位: <span>{{ cardData.creatorDepartmentName }}</span>
      </div>
      <div>
        <el-button-group>
          <el-button type="primary" size="mini" @click="applyService">申请使用</el-button>
          <el-checkbox style="padding-left: 25px;padding-top: 3px;" size="mini" @change="checked=>applyAdd(checked)">加入申请列表</el-checkbox>
        </el-button-group>
      </div>
    </div>
    <!--  地图KEY 申请表单  -->
    <map-key-application-form :is-show.sync="showMapKeyApplicationForm" :map-service-data="cardData"/>
  </div>
</template>

<script>
import MapKeyApplicationForm from "@/views/resources-center/service/MapKeyApplicationForm";

/**
 * {资源卡片简略}
 *
 * @author: 宋康
 * @date: 2023/2/2
 */
export default {
  name: "resource-tidy-card",
  components: {
    MapKeyApplicationForm
  },
  props: {
    cardData: {
      type: Object,
      required: true
    }
  },
  data() {
    return {
      showMapKeyApplicationForm: false
    }
  },
  methods: {
    /**
     * {跳转详情}
     *
     * @author: 宋康
     * @date: 2023/2/2
     */
    jumpDetails() {
      if (this.cardData) {
        const item = this.cardData;
        this._debounce(() => {
          window.sessionStorage.removeItem("serviceDetails" + item.servId);
          if (item.resourceType === 1 || item.resourceType === 2 || item.resourceType === 3) {
            this.$router.push({name: 'ServiceDetails', query: {"item": item, 'servId': item.servId}})
          } else if (item.resourceType === 4) {
            this.$router.push({name: 'InterfaceDetails', query: {"item": item, 'servId': item.servId}})
          } else if (item.resourceType === 5) {
            this.$router.push({name: 'FileDetails', query: {"item": item, 'servId': item.servId}})
          }
        }, 200)
      }
    },
    /**
     * {申请使用}
     *
     * @author: 宋康
     * @date: 2023/2/2
     */
    applyService() {
      if (this.$store.state.Authentication.access_token) {
        if (this.cardData) {
          this._debounce(() => {
            this.showMapKeyApplicationForm = true;
          }, 200)
        }
      } else {
        this.$XModal.confirm('未检测到登录信息，是否跳转登录？').then(type => {
          if ('confirm' === type) {
            this._toLogin();
          }
        })
      }
    },
    applyAdd(checked){
      this.$emit("applyAdd", checked,this.cardData);
    }
  },
  mounted() {
  }
}
</script>

<style lang="scss" scoped>
.resource-tidy-card-main {
  width: 360px;
  height: 165px;
  margin: 0 5px;
  border: 1px #e3e4e7 solid;
  border-radius: 3px;
  padding: 3px;
  display: flex;
  flex-direction: row;
  justify-content: space-between;

  .resource-tidy-card-img {
    width: 110px;
    height: 130px;
    padding-top: 10px;

    > img {
      width: 100%;
      height: 100%;
    }
  }

  .resource-tidy-card-dec {
    width: 240px;
    height: 165px;

    .resource-tidy-card-title {
      width: 100%;
      font-size: 18px;
      color: #2A2F3C;
      padding-bottom: 3px;
      padding-left: 5px;
      border-bottom: 1px #2A2F3C dashed;

      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;

      & > span:hover {
        color: #3f88e7;
        cursor: pointer;
      }
    }

    .resource-tidy-card-intr {
      width: 100%;
      height: 79px;
      padding-top: 3px;
      padding-left: 5px;
      font-size: 14px;
      color: #868688;

      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
    }

    .resource-tidy-card-dep {
      width: 100%;
      padding-top: 3px;
      padding-left: 5px;
      padding-bottom: 5px;
      font-size: 12px;
      color: #868688;

      overflow: hidden;
      text-overflow: ellipsis;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 1;
    }
  }
}
</style>